<!--
 * @Author: your name
 * @Date: 2021-10-07 16:48:11
 * @LastEditTime: 2021-10-08 15:17:48
 * @LastEditors: Please set LastEditors
 * @Description: 电影排行榜页面
 * @FilePath: \film-project\src\views\RankingList.vue
-->
<template>
    <div class="content">
        <div id="title">
            <h1>电影排行榜</h1>
        </div>
        <div class="left">
          <div class="name">电影新片榜 · · · · · · </div>
          <div class="projects">
            <div class="project"  v-for="item in movies" :key="item.id">
              <div class="picture"><img :src="item.cover" alt="图片丢失" width="85px"></div>
              <div class="descript">
                <div class="othername"><span>{{item.title}}</span></div>
                <div class="message" v-html='item.content'></div>
                <div class="score">
                  <el-rate
                    v-model="value"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}">
                  </el-rate>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="ranking_list">
            <div class="name">分类排行榜 · · · · · · </div>
            <div class="classify" v-for="item in classify" :key="item.id" v-on:click='onCalssify(item.id)'>
              <li>{{item.name}}</li>
            </div>
          </div>
          <div class="mouth_list">
            <div class="name">一周口碑榜 · · · · · · </div>
          </div>
        </div>
    </div>
</template>
<script>
import {get} from '../utils/request'
import request from '../utils/request'
export default {
    data() {
      return {
        value: 3.5,
        movies:[],   //电影信息
        classify:[]  //分类排行榜
      }
    },
    methods:{
      //获取电影信息
      findAllMovies(){
        request.get('/index/article/pageQuery?page=1&pageSize=5').then(res=>{ //get()是请求get接口  请求路径  字符串拼接?传递参数  
        if(res&&res.status==200&&res.data){  //判断请求存在  
        this.movies=res.data.list;  //将后台请求回来的游学项目列表赋值给projects  回调函数
        }else{
          this.movies=[];
        }
      });  
      },
      //获取分类
      findAllClassify(){
        get('/index/category/findAll').then(res=>{
          this.classify=res.data;
        })
      },
      onCalssify(id){    //实现点击分类排行榜之后页面跳转
        this.$router.push({
          path:'/project',
          query:{
            id
          }
        })
      }
    },
    created(){
      this.findAllMovies();  //调用查看电影方法
      this.findAllClassify();  //调用查询分类的方法
    }
  }
</script>
<style scoped>
.content{
    width: 1000px;
    margin: 0 auto;
    box-sizing: border-box;
}
.content .left,
.content .right{
  float: left;
  color: #007722;
  font-size: 18px;
}
.content .left{
  width: 70%;
}
.content .right{
  width:30%;
}
.content .left .project{
  border-top: 2px dotted #dddddd;
  margin-top: 10px;
  width: 90%;
  padding: 20px 10px 10px;
  font-size: 14px;
}
.content .left .project .picture img{
  vertical-align: top;
}
.content .left .project .picture{
  float: left;
}
.content .left .project .descript{
  float: left;
  width: 80%;
  margin-left: 20px;
}
.content .left .project .descript .othername span{
  color:#666699;
}
.content .left .project .descript .othername span:hover{
  color: white;
  background-color: #3377aa;
}
.content .left .project .descript .message{
  margin-top: 18px;
  color: #666666;
  height: 60px;
  overflow: hidden;
}
.content .left .project .descript .score{
  margin-top: 18px;
}
.content .left .project::after{
  content: '';
  display: block;
  clear: both;
}
.content .right .classify{
  background-color: pink;
  /* display: flex;
  flex-wrap: wrap; */
}
.content .right .classify li{
  float: left;
  list-style: none;
  color: #4d77bf;
  font-size: 15px;
  box-sizing: border-box;
  margin-right: 20px;
  margin-top: 14px;
  border-radius: 2px;
}

.content .right .classify li:hover{
  color: white;
  background-color: #3377aa;
}
.content .right .ranking_list{
}
.content .right .mouth_list{
  clear: both;
  margin-top: 120px;
}
</style>
